<div class="modal-header" style="padding:0.5rem">
    <h5 class="modal-title">
        <span></span>
    </h5>
    <span class="pull-right">
        <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
            <i aria-hidden="true" class="bi bi-x"></i>
        </button>
    </span>
</div>
<div class="modal-body"  id="media-library-main" >
    <div class="row mb-2">
        <div class="col-sm-10">
            <div class="form-group">
                <i class="fa fa-folder-open text-warning"></i>&nbsp;
                <a *ngFor="let item of pathItems; let i = index;" (click)="openDir(item)" href="javascript:void(0)">
                    {{item.displayName}} <span style="color:black" *ngIf="i < pathItems.length-1" >&nbsp;>&nbsp;</span>
                </a>
            </div>
        </div>
        <div class="col-sm-2 text-right">
            <a class="btn btn-sm btn-circle btn-outline blue"  *ngIf="permissions['Pages_Directory_Create']" (click)="createRootDirectory()" role="button">
                <i class="fa fa-plus"></i>{{"AddRootDirectory" | localize}}</a>
        </div>
    </div>

    <div class="row">
        <!-- 左侧文件夹清单 -->
        <div class="col-sm-2">
            <div id="fileFinderLeft" style="min-height:450px;">
                <ul>
                    <li *ngFor="let item of dirItems"  (contextmenu)="onDirRightClick($event, item)">
                        <a (click)="openDir(item)" href="javascript:void(0)"  >
                            <i class="fa fa-folder" [ngClass]="getDirectoryIcon(item)"></i>
                            &nbsp; {{item.displayName}}</a>
                    </li>
                </ul>

                <p-contextMenu #ouContextMenu  [model]="ouContextMenuItems" appendTo="body" baseZIndex="99999"></p-contextMenu>
            </div>
        </div>
        <!-- 右侧内容 -->
        <div class="col-sm-10" style="padding-left:0" id="container">
            <div class="row">
                <div class="col-sm-10">
                    <form class="form-inline">
                        <div class="checkbox-list mr-4" *ngIf="canMultiSelect">
                          <div class="form-group" >
                              <label for="isMultiSelect" class="checkbox" style="margin-bottom: 0">
                                  <input id="isMultiSelect" type="checkbox" name="isMultiSelect" [(ngModel)]="isMultiSelect">
                                  <span></span>
                                 &nbsp; {{"MultiSelect" | localize}}
                              </label>
                              <span class="form-text text-muted"></span>
                          </div>
                        </div>
                        <div class="form-group">
                            <input placeholder="……" style="width:400px" class="form-control mr-2" name="searchInput" [(ngModel)]="pagedFileParam.filter" />
                            <a class="btn btn-sm btn-primary blue mr-1" (click)="getList(true)" role="button">{{'Search'|localize}}</a>
                            <a class="btn btn-sm btn-primary blue mr-1 p-button p-fileupload-choose"  [buttonBusy]="computing" busyText="loading…"  (click)="chooseFile()" role="button">
                                <input #fileInputEle type="file" (change)="fileInputEleChange($event)" multiple="false" >
                                {{"FileSearch" | localize}}
                            </a>

                            <a *ngIf="!showFileUpload && canUpload" class="btn btn-sm btn-primary blue mr-1"  (click)="showFileUpload= !showFileUpload" role="button">
                                {{"UploadFiles" | localize}}
                            </a>
                            <a class="btn btn-sm btn-primary blue mr-1" *ngIf="showFileUpload" (click)="showFileUpload= !showFileUpload" role="button">
                              {{"Cancel" | localize}}
                            </a>
                        </div>
                    </form>
                </div>
                <div class="col-sm-2 text-right">
                    <a class="btn btn-sm btn-primary blue mr-1" *ngIf="selectedFile" (click)="confirmIt()" role="button">{{'Submit'|localize}}</a>
                </div>
            </div>
            
            <!-- 文件上传 -->
            <div *ngIf="showFileUpload" >
                <div class="row pt-4" >
                    <a *ngIf="canUpload" class="btn btn-sm btn-primary blue mr-1 p-button p-fileupload-choose" (click)="chooseUploadFile()" role="button">
                        <input #fileInputEle2 type="file" (change)="fileInputEle2Change($event)" multiple="true" >
                        {{"SelectFiles" | localize}}
                    </a>
                    <a class="btn btn-sm btn-primary blue mr-1" (click)="handleUpload()" role="button">{{"Upload" | localize}}</a>
                    <a class="btn btn-sm btn-primary blue mr-1" (click)="handleResume()" *ngIf="canResume()"  role="button">{{"Resume" | localize}}</a>
                    <button class="btn btn-sm btn-primary blue mr-1" [disabled]="disabledPause()" (click)="handlePause()" role="button">{{"Pause" | localize}}</button>
                </div>
                <div class="row pt-4" *ngIf="container!= null">
                    <div class="col-sm-2" >
                        <div *ngIf="!container.icon">
                            <img class="bg-gray" src="{{container.dataUrl}}" style="max-height:80px;max-width:100px" />
                        </div>
                        <div *ngIf="container.icon">
                            <i [ngClass]="container.icon" style="font-size:35px;line-height: 35px;"></i>
                        </div>
                    </div>
                    <div class="col-sm-10" style="display:flex;align-items:center;">
                        <span>{{container.file.name}}</span>
                    </div>
                </div>
                <div class="row pt-2" *ngIf="showHashProgress">
                    <div class="col-sm-9" >
                        <div>读取文件中……</div>
                        <p-progressBar mode="indeterminate" ></p-progressBar>
                    </div>
                </div>
                <div class="row pt-2" *ngIf="showProgressBar()">
                    <div class="col-sm-9" >
                        <div>上传进度&nbsp;{{uploadProgress}}% </div>
                        <p-progressBar [value]="uploadProgress" ></p-progressBar>
                    </div>
                </div>
                <div class="row pt-2" *ngIf="showMerging">
                    <div class="col-sm-9" >
                        <div>合并文件中……</div>
                        <p-progressBar mode="indeterminate" ></p-progressBar>
                    </div>
                </div>
                <div class="row pt-2" *ngIf="showProgressBar() && container && container.isMultiPartUpload">
                    <div class="col-sm-12">
                        <div class="cube-container" [ngStyle]="{width:cubeWidth+'px'}">
                          <div class="cube" *ngFor="let chunk of chunks">
                            <div [ngClass]="getChunkCssClasses(chunk)"  [ngStyle]="{'height':chunk.progress+'%'}" >
                            </div>
                          </div>
                        </div>
                    </div>
                </div>

                <div class="row pt-4">
                    <div class="col-sm-12">
                        <table class="table table-hover table-striped table-bordered col-sm-12 table-multiple">
                            <tr *ngFor="let item of uploadingFileQueue; let i = index">
                                <td style="vertical-align:middle">
                                    <div *ngIf="!item.icon">
                                        <!--TODO做图片预览-->
                                        <img class="bg-gray" src="{{item.dataUrl}}" style="max-height:80px;max-width:100px" />
                                    </div>
                                    <div *ngIf="item.icon">
                                        <i [ngClass]="item.icon" style="font-size:35px;line-height: 35px;"></i>
                                    </div>
                                </td>
                                <td style="vertical-align:middle">
                                    {{item.file.name}}
                                </td>
                                <td style="vertical-align:middle">{{item.fileSizeStr}}</td>
                                <td style="vertical-align:middle">
                                    <a (click)="openDir(item.customData.pathItem)" title="{{item.customData.pathItem.path}}" href="javascript:void(0)">{{item.customData.pathItem.displayName}}</a>
                                </td>
                                <td style="vertical-align:middle">
                                    <button type="button" class="btn btn-xs btn-danger" (click)="cancelFromQueue(i)" >
                                        <span class="fa fa-fw ion-close"></span>
                                    </button>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
             </div>

            <div class="row pt-4">
                <!-- 文件瀑布流 -->
                <div class="col-sm-9" >
                  <div style="width:100%" #vc [ngStyle]="{'height':containerHeight+'px'}" id="file-container">
                      <ul id="media-library-main-list" class="row" style="margin-left: 0;margin-right: 0;">
                          
                      </ul>
                  </div>
                </div>
                <!-- 文件详情 -->
                <div class="col-sm-3" id="media-library-main-editor">
                    <div>
                        <h3 *ngIf="selectedFile">{{'Properties'|localize}}</h3>
                        <div *ngIf="selectedFile" style="min-height:200px;"  class="mt-3">
                            <i *ngIf="selectedFile.icon" [ngClass]="selectedFile.icon" style="font-size:35px;"></i>
                            <img *ngIf="!selectedFile.icon" src="{{selectedFile.absoluteUrl}}" class="pic-size bg-gray"  />
                            <div class="properties">
                                <div>
                                    <em>{{"CreationTime" | localize}} : </em>
                                    <span>
                                        由{{selectedFile.creatorUser}} 创建于 {{selectedFile.creationTime | luxonFormat:'F'}}
                                    </span>
                                </div>
                                <div *ngIf="selectedFile.lastModificationTime">
                                    <em>{{"MotifyTime" | localize}} : </em>
                                    <span>
                                        由{{selectedFile.lastModifierUser}} 编辑于 {{selectedFile.lastModificationTime | luxonFormat:'F'}}
                                    </span>
                                </div>
                                <div><em>{{"FileName" | localize}} : </em> <span>{{selectedFile.fileName}}</span> </div>
                               
                                <div><em>{{"Size" | localize}} : </em> <span>{{selectedFile.sizeStr}}</span> </div>
                                <div *ngIf="selectedFile.dimensions"><em>{{"Dimensions" | localize}} : </em> <span>{{selectedFile.dimensions}}</span>
                                </div>
                                <div><em>SHA1 : </em> <span>{{selectedFile.sha1}}</span> </div>
                                <div><em>{{"Directory" | localize}} : </em>
                                    <span>
                                        <a *ngFor="let item of selectedFile.pathItems; let i = index;" (click)="openDir(item)" href="javascript:void(0)">
                                            {{item.displayName}} <span style="color:black" *ngIf="i < selectedFile.pathItems.length-1">&nbsp;>&nbsp;</span>
                                        </a>
                                    </span>
                                </div>
                               
                            </div>
                            
                            <div class="mt-3">
                                <a class="btn btn-sm btn-primary blue mr-1" *ngIf="!selectedFile.icon" (click)="lookOver()" role="button">{{'LookOver'|localize}}</a>
                                <a class="btn btn-sm btn-primary blue mr-1" *ngIf="selectedFile.icon" target="_blank" href="{{selectedFile.downloadUrl}}" role="button">{{'Download'|localize}}</a>
                                <a class="btn btn-sm btn-primary blue mr-1" *ngIf="checkFileEditPermission(selectedFile)" (click)="editFileProperties()" role="button">
                                    {{"Edit" | localize}}</a>  

                                <a class="btn btn-sm btn-primary blue mr-1 p-button p-fileupload-choose" (click)="replaceFile()" 
                                  *ngIf="this.permissions['Pages_Library_Upload'] && checkFileEditPermission(selectedFile)" role="button">
                                    <input #fileInputEleReplace type="file" (change)="fileInputEleReplaceChange($event)" multiple="false" >
                                    {{"Replace" | localize}}
                                </a>
                            </div>
                            <div class="mt-1">
                                <a class="btn btn-sm btn-warning mr-1" *ngIf="checkFileDeletePermission(selectedFile)" (click)="delete()" role="button"> {{"Delete" | localize}}</a>
                                <a class="btn btn-sm btn-warning mr-1" *ngIf="checkFileDeletePermission(selectedFile)" (click)="moveFile()" role="button">{{"MoveTo" | localize}}</a>

                            </div>

                            <div class="mt-3  properties" >
                                <div><em>{{"FilePath" | localize}} : </em> <span>{{selectedFile.fileUrl}}</span> </div>
                                <div *ngIf="!selectedFile.icon"><em>Alt : </em> <span>{{selectedFile.title}}</span> </div>
                                <div *ngIf="selectedFile.tags"><em>{{"Description" | localize}} : </em> <span>{{selectedFile.tags}}</span> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
